<template>
  <a-layout>
    <a-layout-sider :style="style">
      <locale-table-group @select="selectTable" :groupId="groupId"></locale-table-group>
    </a-layout-sider>
    <a-layout style="background: white;">
      <locale-table-list v-if="!isCommon && tableName" :table-name="tableName" :height="height"></locale-table-list>
      <locale-common-list v-if="isCommon" :groupId="groupId" :height="height"></locale-common-list>
    </a-layout>
  </a-layout>
</template>

<script>

import LocaleTableGroup from './LocaleTableGroup'
import LocaleTableList from './LocaleTableList'
import LocaleCommonList from './LocaleCommonList'

export default {
  name: 'LocaleManager',
  components: {
    LocaleTableGroup,
    LocaleTableList,
    LocaleCommonList,
  },
  props: {
    groupId: {
      type: String,
      required: true
    },
  },
  computed: {
    style() {
      return {
        background: 'white',
        overflow: 'auto',
        height: this.height + 'px',
      }
    }
  },
  data() {
    return {
      tableName: null,
      isCommon: false,
      height: document.body.clientHeight - 224,
    }
  },
  methods: {
    selectTable(tableName, isCommon) {
      this.isCommon = isCommon;
      this.tableName = tableName;
    }
  }
}
</script>
